<template>
  <div class="home-container">
    <!-- 顶部欢迎横幅 -->
    <el-card shadow="hover" class="banner-card">
      <div class="banner-content">
        <img src="@/assets/sanjiang.png" alt="logo" class="logo" />
        <div class="welcome-text">
          <h1>欢迎来到校园社团管理平台</h1>
          <p>发现兴趣、加入社团、参与活动，一起创造校园精彩生活！</p>
        </div>
      </div>
    </el-card>

    <!-- 快速入口 -->
    <div class="quick-entry">
      <el-card 
        shadow="hover" 
        class="entry-card" 
        v-for="entry in entries" 
        :key="entry.title" 
        @click="handleEntryClick(entry.name)"
      >
        <el-icon :size="30" class="entry-icon"><component :is="entry.icon" /></el-icon>
        <div class="entry-title">{{ entry.title }}</div>
      </el-card>
    </div>

    <!-- 热门社团轮播 -->
    <el-card shadow="hover" style="margin-top: 30px">
      <div class="section-title">🔥 热门社团推荐</div>
      <el-carousel height="500px" trigger="click">
        <el-carousel-item v-for="(club, index) in hotClubs" :key="index">
          <img :src="club.img" alt="" style="width: 100%; height: 100%; object-fit: cover;" />
          <div class="carousel-caption">{{ club.name }}</div>
        </el-carousel-item>
      </el-carousel>
    </el-card>

    <!-- 通知公告 -->
    <el-card shadow="hover" style="margin-top: 30px;">
      <div class="section-title">📢 最新公告</div>
      <el-timeline>
        <el-timeline-item v-for="item in announcements" :key="item.id" :timestamp="item.time">
          {{ item.content }}
        </el-timeline-item>
      </el-timeline>
    </el-card>
  </div>
</template>

<script setup>
import { reactive } from 'vue'
import { School, User, Star } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
import dancer from '@/assets/dancer.png'
import program from '@/assets/program.png'
import shoot from '@/assets/shoot.jpg'

const router = useRouter()

// 从 localStorage 获取当前用户信息
const user = JSON.parse(localStorage.getItem('xm-pro-user'))

const entries = [
  { title: '查看社团', icon: School, name: 'clubs' },
  { title: '我的社团', icon: User, name: 'my-club' },
  { title: '消息通知', icon: Star, name: 'notification' }
]

const hotClubs = [
  { name: '舞蹈社', img: dancer },
  { name: '编程协会', img: program },
  { name: '摄影社', img: shoot }
]

const announcements = [
  { id: 1, time: '2025-05-15', content: '【社团系统】上线啦！快来注册体验吧～' },
  { id: 2, time: '2025-05-14', content: '【社团纳新】编程协会2025春季纳新开始啦！' },
  { id: 3, time: '2025-05-13', content: '【活动预告】校园艺术节将于本月下旬举行' }
]

// 处理入口点击
const handleEntryClick = (name) => {
  let path = ''
  if (user && user.role === 'PRE') {
    // 社长角色跳转到 president 路由下的对应页面
    path = `/president/${name}`
  } else {
    // 其他角色（如学生）跳转到 student 路由下的对应页面
    path = `/student/${name}`
  }
  router.push(path)
}
</script>

<style scoped>
.home-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
}

.banner-card {
  background: linear-gradient(to right, #4facfe, #00f2fe);
  color: white;
}

.banner-content {
  display: flex;
  align-items: center;
}

.logo {
  width: 80px;
  margin-right: 20px;
}

.welcome-text h1 {
  margin: 0;
  font-size: 28px;
}

.welcome-text p {
  margin-top: 5px;
  font-size: 16px;
}

.quick-entry {
  display: flex;
  justify-content: space-between;
  margin-top: 30px;
}

.entry-card {
  flex: 1;
  text-align: center;
  cursor: pointer;
  transition: 0.3s;
  margin: 0 10px;
}

.entry-card:hover {
  transform: translateY(-5px);
}

.entry-icon {
  margin-bottom: 10px;
}

.entry-title {
  font-size: 16px;
  font-weight: bold;
}

.section-title {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 20px;
}

.carousel-caption {
  text-align: center;
  font-size: 18px;
  margin-top: 10px;
}
</style>